<span [ngClass]="innerClass" (click)="isCollapsed = !isCollapsed">
  <ng-content></ng-content>
</span>

<nz-drawer [nzWidth]="300" [nzVisible]="!isCollapsed" (nzOnClose)="isCollapsed = !isCollapsed">
  <div style="margin-bottom:24px;">
    <h3 class="title">整体风格设置</h3>
    <div class="blockChecbox">
      <div *ngFor="let theme of themes" class="item" nz-tooltip [nzTitle]="theme.title" (click)="setting.theme = theme.key">
        <img [src]="theme.image" [alt]="theme.title">
        <div class="selectIcon" *ngIf="theme.key == setting.theme">
          <i class="anticon anticon-check"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="themeColor">
    <h3 class="title">主题色</h3>
    <div class="content">
      <div *ngFor="let color of colors" class="colorBlock" nz-tooltip [nzTitle]="color.title" [style.backgroundColor]="color.color"
        (click)="setting.color = color.key">
        <i class="anticon anticon-check" *ngIf="color.key == setting.color"></i>
      </div>
    </div>
  </div>
  <nz-divider></nz-divider>
  <div style="margin-bottom:24px;">
    <h3 class="title">导航模式</h3>
    <div class="blockChecbox">
      <div *ngFor="let mode of modes" class="item" nz-tooltip [nzTitle]="mode.title" (click)="setting.mode = mode.key">
        <img [src]="mode.image" [alt]="mode.title">
        <div class="selectIcon" *ngIf="mode.key == setting.mode">
          <i class="anticon anticon-check"></i>
        </div>
      </div>
    </div>
  </div>
  <nz-list [nzSplit]="false" [nzDataSource]="layouts" [nzRenderItem]="layoutItem">
    <ng-template #layoutItem let-item>
      <nz-list-item [style.opacity]="item.disabled && item.disabled(setting) ? '0.5' : ''" [nzContent]="item.title"
        [nzActions]="[layoutAction]">
        <ng-template #layoutAction>
          <nz-switch nzSize="small" [(ngModel)]="setting[item.key]" [nzDisabled]="item.disabled && item.disabled(setting)"></nz-switch>
        </ng-template>
      </nz-list-item>
    </ng-template>
  </nz-list>
  <nz-divider></nz-divider>
  <div style="margin-bottom:24px;">
    <h3 class="title">其他设置</h3>
    <nz-list [nzSplit]="false" [nzDataSource]="others" [nzRenderItem]="otherItem">
      <ng-template #otherItem let-item>
        <nz-list-item [nzContent]="item.title" [nzActions]="[otherAction]">
          <ng-template #otherAction>
            <nz-switch nzSize="small" [(ngModel)]="setting[item.key]"></nz-switch>
          </ng-template>
        </nz-list-item>
      </ng-template>
    </nz-list>
  </div>
  <ng-content select="ng-container[extra]"></ng-content>
</nz-drawer>
